<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../libs/jquery.min.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!--<div class="layui-header"></div>-->
<!--导航栏-->
<ul class="layui-nav" style="background-color: #202020">
    <li class="layui-nav-item" style="width: 5%"></li>
    <li class="layui-nav-item" style="width: 13%" value="logo"><a href=""><img src="../imgs/brand/yoyoga.png"
                                                                               style="height: 50px"></a></li>
    <li class="layui-nav-item" style="width: 12%"></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">主页</a></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%">
        <a href="#">介绍</a>
        <dl class="layui-nav-child">
            <dd><a href="">瑜伽好处</a></dd>
            <dd><a href="">瑜伽流派</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">场馆</a></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%">
        <a href="#">教练</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd class="layui-this"><a href="">选中项</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">社区</a></li>


    <!--<li class="layui-nav-item" style="float: right">
        <a href="#"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="#">个人主页</a></dd>
            <dd><a href="#">修改信息</a></dd>
            <dd><a href="#">我的钱包</a></dd>
            <dd><a href="#">我的好友</a></dd>
            <dd><a href="#">退出</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"  style="float: right">
        <a href="">我的订单</a>
    </li>
    <li class="layui-nav-item" style="float: right">
        <a href="">消息<span class="layui-badge-dot"></span></a>
    </li>-->

    <li class="layui-nav-item" style="float: right">
        <a href="">注册</a>
    </li>
    <li class="layui-nav-item" style="float: right"><span style="color: #cccccc">|</span></li>
    <li class="layui-nav-item" style="float: right">
        <a href="">登陆</a>
    </li>
</ul>
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规轮播</legend>
</fieldset>-->
<!--<div class="layui-carousel" id="test2" style="width: 100%">-->
<!--<div carousel-item="">-->
<!--<div>条目1</div>-->
<!--<div>条目2</div>-->
<!--</div>-->
<!--</div>-->

<!--<div style="float: left;position: absolute;z-index: 99"><img src="imgs/brand/yoyoga.png"></div>-->
<div style="padding: 20px; background-color: #dddddd;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8 layui-col-md-offset2">
            <div class="layui-card">
                <div class="layui-card-header"
                     style="text-align: center;font-size: 20px;font-weight: bolder;height: 80px;line-height: 80px">4个唯美到极点的瑜伽打卡圣地 美到窒息！
                </div>
                <div class="layui-card-body">
                    &nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="//t.cn/RCzsdCq" class="layui-nav-img">金珠瑜伽</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="color: #777777">2019-08-05 10:58:04</span>
                    <hr>
                    <span class="layui-col-md10 layui-col-md-offset1">
                        <br>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;现在很多人都在学习瑜伽，通过愈加来寻求健康的生活方式也越来越受大众青睐，对于瑜伽练习者而言局限与室内的练习，已经多少不能满足练习者们的小心思，随着室外瑜伽的流行，一轮瑜伽与经典的打卡风潮更适合当下学习瑜伽的小伙伴了！所以今天小编就给大家介绍4个为没到几点的瑜伽打卡圣地，给别人美到窒息的触动！
                        <br>
                        <br>
                        <img src="../imgs/paging/page4/1.jpg" width="100%">
                        <br>
                        <br>
                        <h3 style="font-weight: bolder">TOP1-日本冲绳岛</h3>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“冲绳岛”是日本著名的旅游景点岛屿，这里的居民主要以农业为主，以水稻和系数的果园为辅助，北距九州岛约340公里，南北长约107公里，面积约1208平方公里，冲绳岛独特的地理位置使它具有日本少有的亚热带风光，岛上植被繁茂棕榈树、槟榔树岩棉数公里，风景奇特秀美。延绵的海岸线，金黄的沙滩、碧蓝透彻的海水，共同构成了冲绳岛，这一幅美轮美奂的绚烂景象，当然这也使得它有了“东方夏威夷”的美称。想象一下在冲绳的海边，脚踩温暖松软的海沙，你可以化身飞鸟与鱼，可以幻想自己遨游于大海，飞翔在这湛蓝无比的天空下，阳光是暖的，空气是暖的，风也是暖的！试着在北海道用瑜伽体式来唤醒疲惫的身躯，去感受大自然和瑜伽相结合的那份触动！
                        <br>
                        <br>
                        <img src="../imgs/paging/page4/2.jpg" width="100%">
                        <br>
                        <br>
                        <h3 style="font-weight: bolder">TOP2-兰卡威</h3>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;兰卡威是马来西亚最大岛屿，该岛屿由99小岛屿组合而成，位于马六甲海峡，槟榔屿的北方，接近泰国。面积526平方千米。岛上的经济以旅游业为主，是马来西亚著名旅游景点之一。兰卡威之所以 深受游客们的喜欢是它，常年宜居的气候和温度，以及有着“最美珍珠海滩”之称的珍南海滨。洁白柔软的沙滩柔软细腻，松弛有度，仿佛用一种新的方式来欢迎着接近它的每一位瑜伽爱好者！夕阳西下独坐沙滩，被群山笼罩下的你可以用一套瑜伽体式来纪念这美好的一天，静看风云流动，波涛击岸，繁星点缀，独享其安，这种感觉怎么能用惬意和舒适去表达呢？
                        <br>
                        <br>
                        <img src="../imgs/paging/page4/3.jpg" width="100%">
                        <br>
                        <br>
                        <h3 style="font-weight: bolder">TOP3-普罗旺斯</h3>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果说形容法国是一位优雅纯洁而又浪漫无比的翩翩少女，那"普罗旺斯"可就是这位少女头上最耀眼的"明珠”，这颗明珠位于法国东南部，其蓝色幽美的海岸线濒临地中海，这可明珠以生产优质的葡萄酒和种植薰衣草而闻名全世界！
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果此时的你正浸泡在薰衣草的海里，那么你大可以静下心来，用瑜伽的“树式”来感受这份大自然的礼物，此刻薰衣草的香气会渗透进你的每个毛孔，让你感到清爽，宁静，你不妨听听蜜蜂打招呼的声音，感受蝴蝶起舞的轻巧，用心把自己置于这万亩清香中，和大自然融为一体！
                        <br>
                        <br>
                        <img src="../imgs/paging/page4/4.jpg" width="100%">
                        <br>
                        <br>
                        <h3 style="font-weight: bolder">TOP4-牙买加内格里尔洞穴度假村</h3>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;内格里尔，是牙买加的一个很小的城镇，位于牙买加的西部，而著秘境的内格里洞穴度假村就位于牙买加西边的石灰岩崖壁上。这里不仅受到游客们的也喜欢，也受到二来自世界各地的瑜伽爱好者的青睐，这里远离城市喧嚣，远离世俗的吵闹，安静惬意，酒店的西北方就可以俯视这个加勒比海。
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在这里不仅可以感觉到轻松和典雅，更会使人产生处于世界之巅的奇妙感受。这一点与瑜伽的沉静，柔雅以及天蓝海水的平静相得益彰。试想一下当你做完瑜伽之后，再舒舒服服的享受一下来自加勒比海的精油按摩，那是绝对会让你爱上这里。
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这些景点相必有很多的朋友已经去过，这些静待你都是小编认为比较经典的几个，当然不仅是它们的景色宜人，更多的是它们位置，气候，独特，且非常适合情侣一同前往，如果你会瑜伽，而又长期缺乏室外练习的机会，这几个地方可以做做规划，相信你一定有不一样的收获。
                        <br>
                    </span>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
    </div>
</div>
<!--下边栏-->
<div class="layui-footer layui-container" style="width: 100%;height: 250px;background-color: #202020">
    <img src="../imgs/brand/yoyoga.png" alt="" style="width: 20%;margin-left: 40%;margin-top: 50px"/>
    <p style="font-size: large;width: 10%;margin-left: 44.5%;margin-top: 10px;text-align: center"><a href="../index.html"
                                                                                                     style="color: #777777">www.yoyoga.com</a>
    </p>
    <div class="layui-copy">
        <p style="font-size: 14px;color: #777777;width: 30%;margin-left: 40%;margin-top: 20px">© 2019 All Rights Reseved
            Template by esyoga </p>
    </div>
</div>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['element', 'layer'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var layer = layui.layer;

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;


        var $ = layui.$, active = {
            set: function (othis) {
                var THIS = 'layui-bg-normal'
                    , key = othis.data('key')
                    , options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function () {
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function () {
            var value = this.value
                , options = {};
            if (!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>

</body>